<template>
	<u-sticky :zIndex="9">
		<view class="data_page">
			<view class="top u-flex u-flex-between u-flex-items-center">
				<u-search placeholder="请输入" bgColor="#ffffff" :showAction="false" v-model="page.params.keyWord"
					@search="search" @clear="clear"></u-search>
				<view class="three-color u-m-l-16" @click="popShow = true">
					<text class="iconfont f-s-22">&#xe6c9;</text>
					<text class="f-s-14">筛选</text>
				</view>
			</view>
			<view class="search-tag ">
				<u-scroll-list :indicator="false">
					<view v-for="(m, index) in moduleList" :key="m.id" @click="tagClick(m)">
						<tag-btn :text="m.name" :active="page.params.moduleId === m.id"></tag-btn>
					</view>
				</u-scroll-list>
			</view>
			<view class="u-flex u-flex-center u-flex-items-center ">
				<u-icon name="info-circle-fill" color="#033FFF"></u-icon>
				<text class="u-m-l-10 three-color f-s-12">查到 <text class="f-w-b import-color">{{ page.total }}</text>
					条数据</text>
			</view>
		</view>
	</u-sticky>
	<view class="u-flex data-area">
		<view class="_menu">
			<block v-for="(field,index) in fieldList" :key="index">
				<view class="m_item" :class="{
					'm_item_avtive': page.params.parentId == field.value
				}" @click="activeField(field)">
					<text class="_name">{{ field.name }}</text>
				</view>
			</block>
		</view>
		<view class="data_area">
			
			<u-list @scrolltolower="loaderMore">
				<u-list-item v-for="data in page.list" :key="data.id">
					<dataCard :data="data" />
				</u-list-item>
			</u-list>
			<view class="u-p-t-12" v-if="page.total > page.params.pageSize">
				<u-loadmore line :status="page.loadStatus" nomoreText="更多精彩，敬请关注" />
			</view>
		</view>
	</view>
	

	<u-popup :show="popShow" @close="popShow = false" :closeable="false" mode="right" @open="open">
		<view class="pop-box">
			<view class="f-s-14 f-w-b two-color">价格区间</view>
			<view class="box-area">
				<block v-for="(price,index) in config.appInfo.priceAround" :key="index">
					<view class="item-tag u-line-1" :class="{ 'active' : price.value == page.params.priceSection }"
						@click="selectTag(price,'priceSection')">
						{{ price.name }}
					</view>
				</block>
			</view>
			<view class="f-s-14 f-w-b two-color">资料格式</view>
			<view class="box-area">
				<block v-for="(format,index) in config.appInfo.formatAround" :key="index">
					<view class="item-tag u-line-1" :class="{ 'active' : format.value == page.params.format }"
						@click="selectTag(format,'format')">
						{{ format.name }}
					</view>
				</block>
			</view>
			<view class="bottom-btns">
				<view class="btn-box u-flex u-flex-around">
					<up-button shape="circle" type="info" :customStyle="{ width: '120px'}" text="重置"
						@click="reset"></up-button>
					<up-button shape="circle" color="#165DFF" :customStyle=" { width: '120px' }" text="查询"
						@click="search"></up-button>
				</view>
			</view>
		</view>
	</u-popup>


</template>

<script setup>
	import dataCard from '@/components/data_card.vue'
	import tagBtn from '@/components/common/tag-btn.vue'
	import config from '@/config.js'
	import {
		ref
	} from 'vue'
	import {
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"
	import {
		list
	} from '@/api/data';
	import {
		getModuleList,
		getParentFieldList
	} from '@/api/config'
	let popShow = ref(false)
	let fieldList = ref([])
	let moduleList = ref([])
	let page = ref({
		list: [],
		params: {
			keyWord: '',
			moduleId: '',
			parentId: '',
			priceSection: '',
			format: '',
			pageNum: 1,
			pageSize: 8
		},
		loadStatus: 'nomore',
		// 当前页
		currentPage: 1,
		// 总页数
		pages: 1,
		// 总条数
		total: 0
	})

	getList()
	module()
	parentField()
	const tagClick = ({
		id
	}) => {
		page.value.params.moduleId = id
		search()
	}

	function activeField(e) {
		page.value.params.parentId = e.value
		search()
	}

	/**
	 * 查询方法
	 */
	function search() {
		page.value.params.pageNum = 1
		getList()
	}
	/**
	 * 清除搜索条件
	 */
	function clear() {
		page.value.params.keyWord = ''
		search()
	}

	/**
	 * 父级领域
	 */
	function parentField() {
		getParentFieldList('F').then(resp => {
			const list = resp.data.map(f => {
				return {
					value: f.id,
					name: f.name
				}
			})
			fieldList.value = [{
					value: '',
					name: '不限'
				},
				...list,
			]
		})
	}

	function module() {
		getModuleList().then(resp => {
			moduleList.value = [{
					id: '',
					name: '不限'
				},
				...resp.data
			]
		})
	}

	/**
	 * 获取列表
	 */
	function getList() {
		page.value.loadStatus = "loading"
		list(page.value.params).then(resp => {
			if (resp.currentPage === 1) {
				page.value.list = []
			}
			page.value.list = [...page.value.list, ...resp.rows]
			page.value.currentPage = resp.currentPage
			page.value.pages = resp.pages
			page.value.total = resp.total
			popShow.value = false
			if (resp.currentPage == resp.pages) {
				page.value.loadStatus = "nomore"
				return
			}
			page.value.loadStatus = "loadmore"

		})
	}

	function selectTag({
		value
	}, key) {
		page.value.params[key] = value
	}
	
	function loaderMore(){
		if (page.value.currentPage == page.value.pages) {
			page.value.loadStatus = 'nomore'
			return
		}
		page.value.params.pageNum++
		uni.$u.sleep(200).then(() => {
			getList()
		})
		
	}

	/**
	 * 重置搜索条件
	 */
	function reset() {
		page.value.params.parentId = ''
		page.value.params.priceSection = ''
		page.value.params.format = ''
		search()
	}
	onShareAppMessage(() => {
		return {
			title: '尧君智库-资料',
		}

	})
	onShareTimeline(() => {
		return {
			title: '尧君智库-资料'
		}
	})
</script>

<style lang="scss" scoped>
	.data_page {
		background-color: #f4f4f4;
		padding: 12px;

		.top {
			padding-bottom: 12px;

			.screen {
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.data-area {
		height: calc(100vh - 123px);

		._menu {
			overflow-y: scroll;
			border-radius: 0 12px 12px 0;
			padding: 12px 0;
			width: 120px;
			min-width: 120px;
			background-color: #fff;

			.m_item {
				text-align: center;
				padding: 10px 0;
				font-size: 14px;
				color: #B1B1B1;

				._name {
					display: block;
					border-left: 6rpx solid #fff;
					line-height: 24px;
				}
			}

			.m_item_avtive {
				// background-color: #E8F3FF;
				color: #165DFF;
				font-weight: bolder;

				._name {
					border-left: 6rpx solid #165DFF;
				}
			}
		}

		.data_area {
			flex: 1;
			padding: 0 12px;
			overflow-y: scroll;
		}
	}


	.pop-box {
		width: 300px;
		padding: 12px;
		position: relative;
		min-height: calc(100vh - 20px);

		.box-area {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 12px;
			margin: 16px 0;

			.item-tag {
				text-align: center;
				padding: 6px 8px;
				background-color: #F4F4F4;
				color: #606266;
				font-size: 14px;
				border-radius: 4px;
			}

			.active {
				background-color: #E8F3FF;
				color: #165DFF;
			}
		}

		.bottom-btns {
			position: absolute;
			bottom: 0;
			width: 300px;
			background-color: #fff;

			.btn-box {
				padding: 16px 0;
			}
		}
	}

	// :deep(.u-scroll-list) {
	// 	width: calc(100vw - 60px);
	// 	padding-bottom: 0 !important;
	// }
</style>